<template>
<div >
  <h4>{{msg}}</h4>
  <h3>{{message}}</h3>
  <button @click='reverseFn'>翻转</button>
  <hr>
  <a v-bind:href="url">百度1</a>
  <hr>
  <a @click="one" href="http://www.baidu.com">百度2</a>
  <hr>
  <a @click="one" v-bind:href="url">百度3</a>
  <hr>
  <a @click="two(10,$event)" v-bind:href="url">百度4</a>
  <hr>
  <a @click.prevent v-bind:href="url">百度5</a>
  <hr>
  <div @click="fn"><div @click.stop="zi">hhhh</div></div>
  <img :src="imgSrc">
  <p>数量：{{count}}</p>
  <button v-on:click="count++">+1</button>
  <button v-on:click="add">+1</button>
  <button v-on:click="addCount(5)">+5</button>
  <button @click.once='cc'></button>
</div>
  
</template>

<script>
import img from './assets/空面.jpg'
export default {
  data(){
    return {
      msg:'哼哼哈哈vue',
      url:'http://www.baidu.com',
      imgSrc:img,
      count:0,
      message:'hello word'
    }
  },
  methods:{
    add(){
      this.count++;
    },
    addCount(num){
      this.count+=num;
    },
    one(e){
      e.preventDefault();
    },
    two(num,e){
      e.preventDefault();
    },
    fn(){
      console.log('父')
    },
    zi(){
      console.log('子')
    },
    cc(){
      console.log(111);
    },
    reverseFn(){
      // let arr=this.message.split('');
      // arr.reverse();
      // this.message=arr.join('')
      this.message=this.message.split('').reverse().join('');
    }
  }
}
</script>

<style>

</style>